<template>
  <div class="detail">
    <section class="carousel">
      <div class="swiper-container bb1 bcwh">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img class="preview" src="http://www.hewe1483.com/zb_users/upload/2017/03/201703281490699839685502.jpg"></div>
          <div class="swiper-slide"><img src="http://pic.365j.com/article/image/201701/19/2e8e133061.jpg" class="preview"></div>
          <div class="swiper-slide"><img src="http://ww1.sinaimg.cn/large/6f980df8gw1et5a0ximojj20g40b6jsk.jpg" class="preview"></div>
          <div class="swiper-slide"><img src="http://pic1.win4000.com/pic/d/eb/af6d1153496.jpg" class="preview"></div>
          <div class="swiper-slide"><img src="http://ww3.sinaimg.cn/large/6f980df8gw1et56ha4mwtj206y05n0t2.jpg" class="preview"></div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </section>
    <section class="desc mt10r f14r bcwh bs ovh">
      <div class="title">描述</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas adipisci dolores libero quasi? Distinctio ducimus ratione expedita! Mollitia vel eaque tempora ab. Ipsum totam praesentium voluptate repellendus beatae! At, quas.
      </div>
      <div class="sub-title mt10r left">租金</div>
      <div class="price mt10r right">2000元/月</div>
    </section>
    <section class="comment mt10r f14r bcwh bs">
      <div class="title">评论</div>
      <ul class="list">
        <li class="list-item">
          <div class="author">
            <img class="preview" src="https://ws1.sinaimg.cn/large/0069WcBigy1fnn5zfr5wsj302s02rglv.jpg">
            <div class="name">妮可</div>
            <div class="time">2018年02月26日17:51</div>
            <div class="star">4.5</div>
          </div>
          <div class="content">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima consequuntur nobis ipsam reprehenderit? Natus ullam vero id alias architecto, quidem necessitatibus eos neque quisquam ab voluptatum vel illum facilis atque!
          </div>
        </li>
        <li class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, odit provident. Praesentium laudantium delectus distinctio ducimus tempora, necessitatibus saepe, libero eum obcaecati possimus facilis nemo asperiores quas assumenda, dolores in.
        Molestias corporis optio error, libero explicabo quaerat maxime provident dolore rem iure soluta veritatis quia nostrum, asperiores excepturi autem, sed beatae perspiciatis. Impedit expedita deserunt itaque, reiciendis nihil quam voluptatibus?
        Consequatur reiciendis voluptatum veritatis perferendis harum omnis aperiam nulla iste doloremque qui, nostrum nemo tempore nesciunt earum ex quaerat incidunt officia odio aut voluptatibus? Consectetur veniam nulla earum tempore voluptatem!
        Omnis corporis qui modi nulla fuga reiciendis excepturi iure quas ea aspernatur reprehenderit, voluptatem eum itaque, laborum, laudantium minima suscipit. Sit, nemo vero! Commodi sequi quo voluptates eaque possimus quas.
        Ea veritatis tempora voluptatibus doloremque iure sunt, pariatur quaerat numquam voluptates vero iusto minima earum cupiditate odio incidunt officia harum ex enim nisi obcaecati reiciendis asperiores aliquid consectetur sit. Doloremque?
        Ex sint culpa odio sunt eaque veritatis provident. Tempore sed molestias aspernatur adipisci atque ipsum veniam laborum minus dignissimos saepe reprehenderit, odio rem voluptates aperiam tempora ullam natus fuga. Enim!
        Incidunt accusantium, dolorem tempore distinctio reprehenderit mollitia sit at nostrum fugit adipisci rerum error possimus doloremque ducimus totam libero magnam a rem! Pariatur explicabo qui sunt quibusdam rem quisquam consectetur.
        Sunt sapiente nesciunt facere molestiae deserunt, corrupti odit dignissimos suscipit harum soluta? Eaque iure dolores tempore deleniti enim reiciendis perspiciatis, eius, optio obcaecati perferendis repudiandae neque repellendus quibusdam minima modi.
        Rem amet officia ab ipsa, nulla nam quasi enim quaerat expedita unde fugiat hic dolorem dolorum perferendis magnam voluptates sint dignissimos reprehenderit nisi cumque atque eius repudiandae ad quo? Nihil!
        Ex consequuntur fugiat accusamus nemo fuga dignissimos sapiente enim soluta ad tempore quasi molestiae rem reiciendis ipsam laboriosam sint, facilis assumenda porro non repellendus nisi est unde excepturi explicabo. Minima.</li>
        <li class="list-item">comment3</li>
      </ul>
    </section>
    <section class="panel bs" ref="panel">
      <div class="account">
        <img class="perview" src="https://ws1.sinaimg.cn/large/0069WcBigy1fnn5zfr5wsj302s02rglv.jpg">
        <div class="info">
          <span class="name">妮可</span>
          <span class="phone">138********</span>
        </div>
      </div>
      <div class="order f16r wh" @click="order">我要预约</div>
    </section>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.min.css'
import Swiper from 'swiper/dist/js/swiper.min.js'

export default {
  mounted() {
    // 初始化轮播
    new Swiper('.swiper-container', {
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      },
      slidesPerView: 'auto'
    })
  },
  methods: {
    order() {
      this.$router.push({name: 'chat', query: {redirect: 'detail'}})
    }
  }
}
</script>

<style lang="stylus">
.detail
  .swiper-container
    height: 8rem
    z-index: 0
  .swiper-slide .preview
    width: 100%
    height: 8rem
  .desc, .list-item
    padding: .4rem
  .title, .sub-title
    padding: .24rem .4rem .24rem 0
    font-size: .44rem
    color: #999
  .desc
    .price
      font-weight: 700
      color: red
  >.comment
    margin-bottom: 2.6rem
    .title
      padding: .64rem .4rem .24rem .48rem
    .author
      height: 1.18rem
      line-height: 1.18rem
    .name, .time, .star
      display: inline-block
      vertical-align: top
      margin-left: .2rem
      color: #666
      &:not(:last-child)::after
        content: '|'
        margin-left: .2rem
    .preview
      width: 1rem
      height: 1rem
      border-radius: 100%
  .list-item
    &:not(:last-child)
      border-bottom: 1px solid #eee
  >.panel
    display: flex
    position: fixed
    bottom: 0
    width: 100%
    height: 2rem
    line-height: 2rem
    background: white
    .account
      flex: 1
      font-size: .5rem
    .perview
      position: absolute
      left: .4rem
      top: -.6rem
      width: 2.5rem
      height: 2.5rem
      border-radius: 100%
      box-shadow: 0 0 2px #eee
      border: 1px solid black
    .info
      margin: .2rem 0 0 3.4rem
      line-height: .8rem
    .name, .phone
      display: inline-block
      width: 100%
    .order
      width: 6.46rem
      background: orange
      text-align: center
</style>
